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ACCUEIL 
Découvez un moyen simple pour rendre vos bas de pages plus ergonomiques avec un menu de navigation 
dynamique. 
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Depuis plusieurs années, la bonne pratique quand on arrive en bas de page consiste a afficher une fleche pour revenir 
en haut de la page. Pourquoi ? Pour aider les utilisateurs a revenir rapidement au menu et continuer leur navigation. 


Pourquoi ne pas directement mettre une copie du menu en bas de manière plus discrète mais efficace ? 


C'est l'objet de cette solution très simple qui reprend le concept des menus sur mobile pour l'appliquer sur les bas de 
pages: 


Sa 
EN 
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La solution est très simple mais pratique pour ws utilisateurs, et cette dernière ne prend pas plus de place que votre 


ancienne flèche de retour au header. 


Voici comment mettre en place rapidement le système: 


Ajoutez le markup HTML dans le corps de votre page, 


<del nave 


<a href="#0" class="cd-nav-trigger">Menu<span></span></a> 


<nav id="cd-main-nav"> 


<ul> 
<li><a 
<li><a 
cs <a 
<li><a 
<li><a 

</ul> 

</nave 
CAVE 


href="#0">Homepage</a></1i> 
href="#0">Services</a></1i> 
hret—"#0">Porttolio</a></ii> 
href="#0">Pricing</a></1i> 
href="#0"SContact</a></1i> 


Aoutez le stye qui va bien dans votre feuille CSS, (avec medias queries) 


#cd-nav ul { 


J* mobile ficsk */ 


position: fixed; 
width: 90%; 


igues NS; 
bottom. Z0px, 


z-index: 1; 


max-width: 400px; 


visibility: hidden; 
overflow: hidden; 


transform: scale(0); 


trans foOrm—-Origin: 


100% 1002; 


Pranslibion Tranetonmne0 3s, vicibiiiny 0s 0.35;7 


} 


#cd-nav ul.is-visible { 
visibility: visible; 
Eranstormm: Scale (|); 
PAS lEOn tension 0.38; visioility 0s 0s; 


} 


-cd-nav-trigger { 
position: fixed; 
bottom: 2Z0px; 
gieus 567 
width: 44px; 
height: 44px; 


/* image replacement */ 


overflow: hidden; 
text-indent: 100%; 


7 


white-space: nowrap; 


ame 2.5 

} 

@media only screen 
#cd-nav ul { 


and, (mmnewidrh:  AMTUEX) { 


/* the navigation moves to the top */ 
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position: absolute; 
width: auto; 
max-width: none; 
bottom: auto; 


Lop: 


FOX, 


visibility: visible; 
transform: scale (li; 
bransSiblon:s ell Os; 


} 


#cd-nav.is-fixed ul { 
position: fixed; 
width: 90%; 
max-width: 400px; 
bottom: 20px; 


TOPE 


aito; 


visibility: hidden; 
transform: scale(0); 


Puis rendez le menu dynamique avec un seuil d'apparition à déterminer: 


// browser window scroll (in pixels) after which the 


var offset = 300; 
S (window) -Scroll (function () { 
checkMenu () ; 


We 


function checkMenu() { 


if ( 


"menu™ link is shown 


$ (window) .scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 


//add .is-fixed class to #cd-nav 
Nate tor the animacion to. end 


//add the .has-transitions class to main navigation (used to bring back transitions) 
} else if (S(window).scrollTop() <= offset) 


{ 


//check if the menu is open when scrolling up - for browser that supports transitio 


if( mainNavigation.hasClass('is-visible') 
//close the menu 
j/weaLt tor the transition to end 


&& 


IS ('html').hasClass ('no-csstransitions') E 


//remove the .is-fixed class from the #cd-nav and the .has-transitions class froc 


//check if the menu is open when scrolling up - fallback if transitions are not suppor 
else if( mainNavigation.hasClass ('is-visible') 


&& S('html').hasClass ('no-csstransitiortss 


//no need to wait for the end of transition - close the menu and remove the iSi 


} 


//scrolling up with menu closed 
else { 


//remove the .is-fixed class from the #cd-nav and the .has-transitions class front 


Un petit détail qui ajoute une fonction agréable pour ws visiteur. A tester sur vos futures pages web ! 


Site Officiel 


e 2 Commentaires 


A VOIR AUSSI SUR LE MÊME SUJET: 


Smart breadcrumb - Créer des fils d\'arianes avancés avec jQuery 
ListNav- La navigation alphabétique simplifiée 
[Memo] Des portions de code CSS valides tous navigateurs 

Overscroll - Naviguez en scroll dans vos images avec jQuery 

Boxuffs - Des éléments d\'interfaces ergonomiques en CSS3 et XHTML 


# javascript -menu - navigation -footer -ergonomie 


Tweet 
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Baraguiné par Strictfx le 09/07/14 à 09h00 


Bonne idée mais quid de la répercussion sur le référencement? D'après ce que j'avais cru 
comprendre, il était pas forcément bon de répéter deuxfois un menu dans une page. 
Des avis sur le sujet? 


Baraguiné par tobalsan le 09/07/14 a 13h44 


Je ne sais pas ou tu as entendu ça, mais c'est faux La navigation est là pour aider 
l'utilisateur, alors avoir 2 navigation à différents endroits, ce n'est pas pris en compte par 
Google. 
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